<template>
    <div class="unit">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click='createUnit'>创建单位
                    </el-button>
                    <el-popover placement="bottom" trigger="click" popper-class='batchPoper'>
                        <div class='operateBtn'>
                            <el-button type="text" size="mini" icon="el-icon-delete" @click='batchDel'>批量删除</el-button>
                        </div>
                        <el-button type="primary" size="mini" icon="el-icon-s-operation" :disabled='disabled'
                            slot="reference" style='margin:0 10px'>批量操作
                        </el-button>
                    </el-popover>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'>
                    </pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <!-- 批量删除 -->
        <el-dialog :visible.sync="batchDelVisible" width="416px" :show-close='false'>
            <span style="display:flex">
                <span class='el-icon-warning-outline' style="color:#faad14;font-size:22px;margin-right:10px"></span>
                删除后数据无法恢复，确定删除吗?
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="batchDelVisible = false">取 消</el-button>
                <el-button type="primary" @click="getBaseDel">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 表格 -->
        <tableList :tableGroup='tableGroup' :searchForm='formDataList.searchForm' :tableList='tableList' :menu='menu'
            @tableListChecked='tableListChecked' @delTableData='delTableData' @getTableData='getTableData'
            ref='tableList'></tableList>

        <unitDialog :dialogData='dialogData' :dialogStatus='dialogStatus' @dialogClose='dialogClose'></unitDialog>
    </div>
</template>

<script>
    import dynamicForm from '@/components/dynamicForm'
    import tableList from '../components/tableList'
    import unitDialog from '../components/dialog'
    import {
        unitList,
        unitHandle,
        unitDel,
        baseDel,
    } from '@/api/baseController'
    import {
        productColumns
    } from '@/api/customFieldController'
    export default {
        components: {
            dynamicForm,
            tableList,
            unitDialog
        },
        data() {
            return {
                name: 'form',
                disabled: true,
                // 表单项
                formDataList: {
                    formGroup: [{
                            label: 'name',
                            name: '名称',
                            prop: '',
                            placeholder: '请输入名称',
                            key: 'srk'
                        },
                        {
                            label: 'comment',
                            name: '备注',
                            prop: '',
                            placeholder: '请输入编号',
                            key: 'srk'
                        },
                    ],
                    searchForm: {
                        name: '',
                        comment: '',
                        limit: 10,
                        page: 1
                    },
                    formSet: false
                },
                disposeGroup: [],
                tableGroup: [],
                tableList: [],
                // 对话框参数
                dialogData: {
                    title: '创建单位',
                    name: '',
                    comment: '',
                    type: '单位'
                },
                dialogStatus: false,
                // 当前页
                menu: '单位',
                batchDelData: [],
                batchDelVisible: false,
            }
        },
        mounted() {
            this.getProductColumns({type: 'unit'})
                .then(() => {
                    this.getTableData(this.formDataList.searchForm)
                })
        },
        methods: {
            getProductColumns: async function (data) {
                const res = await productColumns(data)
                if (res.code == 200) {
                    this.disposeGroup = []
                    this.tableGroup = []
                    res.data.map((item, i) => {
                        let width = ''
                        width = item.name == 'index' ? '80' : '180'
                        if (item.state) {
                            this.tableGroup.push({
                                label: item.name,
                                name: item.chineseName,
                                width
                            })
                        }
                        this.disposeGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            state: item.state
                        })
                    })
                }
            },
            //监视复选框值变化
            handleChangeDiposeGroup(disposeGroup) {
                let configureList = []
                configureList = disposeGroup.map(i => {
                    return {
                        name: i.label,
                        chineseName: i.name,
                        state: i.state
                    }
                })
                this.getProductColumns({
                    type: 'unit',
                    configureList
                }).then(() => {
                    this.$refs.tableList.changeLayout() //防止改变table列配置出现抖动
                })
            },
            // 单位数据
            getTableData(data) {
                this.$refs.tableList.onloadLogin(true)
                unitList(data).then(res => {
                    this.$refs.tableList.onloadLogin(false)
                    if (res.code == 200) {
                        this.tableList = res.data.records
                        this.tableList.map((item, i) => {
                            item.index = (res.data.current - 1) * 10 + (i + 1)
                        })
                        this.$refs.tableList.totalNum(res.data.total)
                    }
                })
            },
            // 新增单位
            getHandle(data, editMsg) {
                unitHandle(data).then(res => {
                    if (res.code == 200) {
                        this.utils.showMsg(editMsg, 'success')
                        this.getTableData(this.formDataList.searchForm)
                    }
                })
            },
            // 打开对话框
            createUnit() {
                this.dialogStatus = true
            },
            // 对话框关闭后参数
            dialogClose(val, d) {
                if (d) {
                    this.getHandle(d, '创建成功')
                }
                this.dialogStatus = val
            },
            // 表格内容勾选
            tableListChecked(arr, page) {
                this.formDataList.searchForm.page = page
                this.batchDelData = arr.join(',')
                if (arr.length > 0) {
                    this.disabled = false
                } else {
                    this.disabled = true
                }
            },
            //点击查询获取表单数据
            getFormData(val) {
                val.page = 1
                this.getTableData(val)
            },
            // 删除
            delTableData(d, page) {
                let data = {
                    id: d.id
                }
                unitDel(data).then(res => {
                    if (res.code == 200) {
                        if (res.data == 'success') {
                            this.utils.showMsg('删除成功', 'success')
                        } else {
                            this.utils.showMsg(res.data, 'error')
                        }
                        this.formDataList.searchForm.page = page
                        this.getTableData(this.formDataList.searchForm)
                    }
                })
            },
            // 批量删除
            batchDel() {
                this.batchDelVisible = true
            },
            getBaseDel() {
                let data = {
                    type: 1,
                    ids: this.batchDelData
                }
                this.batchDelVisible = false
                baseDel(data).then(res => {
                    if (res.code == 200) {
                        let str = res.data.substring(res.data.indexOf('败'))
                        let n = str.substring(2, str.length - 2)
                        if (n == 0) {
                            this.utils.showMsg(res.data, 'success')
                        } else {
                            this.utils.showMsg(res.data, 'error')
                        }
                        this.getTableData(this.formDataList.searchForm)
                        this.$refs.tableList.clearSel()
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .unit {
        overflow: auto;
    }
</style>